<template>
  <div>
    <div class="top-bar" v-if="!showMask">
      <div class="bars logo">
        <div class="logo_img">
          <img src="@/assets/image/0.jpg" alt="">
        </div>
      </div>
      <div class="bars header-navbar">
        <ul>
          <router-link tag="li" :to="'/' + item.als"
                       v-for="(item,index) in bar"
                       :key="index" active-class="active"
                       exact >
            {{ item.name }}
          </router-link>
        </ul>
      </div>
      <div class="bars user-icon">
        <i class="iconfont">&#xe626;</i>
        <i class="iconfont">&#xe604;</i>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <div class="mask-bar" :style="opacity" v-if="showMask">
      <div class="bars mask-navbar">
        <ul>
          <router-link tag="li" :to="'/' + item.als"
                       v-for="(item,index) in bar"
                       :key="index" active-class="active"
                       exact
          >
            {{ item.name }}
          </router-link>
        </ul>
      </div>
      <div class="bars mask-seach">
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
          suffix-icon="el-icon-search"
        ></el-autocomplete>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "Index",
    data () {
      return {
        bar: [
          { name: '首页', als: 'index' },
          { name: '热门商品', als: 'hot_goods' },
          { name: '新品上线', als: 'new_goods'}
        ],
        showMask: false,
        opacity: {
          num: 0
        },
        state1: '',
        recommendList: []
      }
    },
    /**
     *  @changeScroll : 判断用户滑动页面超过150px 时, 将顶部导航栏更换样式
     *  @loadAll : 获取所有推荐的数据，供输入框检索使用(输入框有值时)
     *  @querySearch : 根据输入框有无输入值返回不用的数据
     *  @createFilter : 使用 toLowerCase() 把输入的值转换成小写（输入中文不影响）,
     *    indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置,即可以查看输入的值与数据库中的数据有无对应值
     *    若有，则返回下标(0,1,2...);若没有, 则返回-1。
     */
    methods: {
      changeScroll () {
        const top = document.documentElement.scrollTop
        if (top > 150) {
          let opacity = top / 200
          //此处用了elment UI 的内置过渡效果 因此注释此段方法
          // opacity = opacity>1 ? 1 : opacity;
          // this.opacity = { opacity }
          this.showMask = true
        } else {
          this.showMask = false
        }
      },
      querySearch(queryString, cb) {
        let quertList = this.quertList;
        let recommendList = this.recommendList;
        // 当输入框有值时，从quertList中过滤对应的数据显示出来，没有值输入时则显示recommendList 的数据
        let results = queryString ? quertList.filter(this.createFilter(queryString)) : recommendList;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (items) => {
          return (items.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
        };
      },
      handleSelect(item) {
        this.$router.push({path: '/goods_info', query: {itemId: item.id}})
      },
      loadAll() {
        axios.get('/api/hotLists.json')
          .then(this.loadAllSucc)
          .catch(err=> {
            console.log(err)
          })
      },
      loadAllSucc (res) {
        if (res && res.status === 200){
          this.quertList = res.data.hotList
          this.recommendList = res.data.recommendList
        }
      }
    },
    mounted() {
      this.loadAll();
    },
    activated () {
      window.addEventListener('scroll', this.changeScroll)
    },
    deactivated () {
      window.removeEventListener('scroll', this.changeScroll)
    }
  }

</script>

<style lang="stylus" scoped>
  .top-bar  {
    background-color: #fff;
    display: flex;
    padding: 10px 6%;
    box-shadow: 0 0 10px 3px #e5e5e5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .bars {
    flex: 1
  }
  .header-navbar {
    flex: 8;
    padding-right: 10px;
  }
  .header-navbar ul {
    padding: 0;
    margin: 0;
    text-align: right;
    line-height: 48px;
  }
  .header-navbar ul li {
    list-style: none;
    display: inline-block;
    line-height: 2rem;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    font-family: Microsoft YaHei UI;
    color: #858585;
    cursor: pointer;
    margin: 0 10px;
  }
  .header-navbar ul li:hover {
    color: #585858
  }

  //  mask
  .mask-bar {
    background-color: #fff;
    display: flex;
    padding: 10px 6%;
    box-shadow: 0 0 10px 3px #e5e5e5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .mask-navbar {
    padding-right: 10px;
  }
  .mask-navbar ul {
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 48px;
  }
  .mask-navbar ul li {
    list-style: none;
    display: inline-block;
    line-height: 2rem;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    font-family: Microsoft YaHei UI;
    color: #858585;
    cursor: pointer;
    margin: 0 10px;
  }
  .mask-navbar ul li:hover {
    color: #585858
  }
  .logo_img {
    width: 40%;
  }
  .logo img {
    width: 100%;
    border-radius: 50%;
  }
  .user-icon {
    text-align: right;
    line-height: 3rem;
  }
  .user-icon i:first-child {
    margin-right: 15px
  }

  //  输入框
  .mask-seach {
    text-align: right;
    line-height: 48px;
  }
  .el-autocomplete {
    width: 70%;
  }
  .mask-seach >>> .el-input--suffix .el-input__inner {
    padding-right: 30px;
    border-radius: 25px;
  }
  .mask-seach >>> .el-icon-search {
    margin-right: 10px;
  }
</style>
